<template>
    <div>
      <input placeholder="输入关键字搜索" v-model.trim="text" @keyup.enter="selected">
      <table class="my-table">
        <thead>
          <tr>
            <th>就诊日期</th>
            <th>医生姓名</th>
            <th>诊断结果</th>
            <th>处方信息</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in records" :key="index">
            <td>{{ item.date }}</td>
            <td>{{ item.doctor }}</td>
            <td>{{ item.diagnosis }}</td>
            <td>{{ item.prescription }}</td>
            <td @click="DetailShow(index)">详情</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
<script>
    export default{
        data(){
            return{
                text:''
            }
        },
        props:{
            records:{
                type:Array,
                required:true
            }
        },
        methods:{
            DetailShow(index){
                this.$emit('DetailShow',{
                  Show:true,
                  selected:index
                })
            },
            selected(){
                this.$emit('selected',this.text)
            }
        }
    }
</script>
  <style scoped>
    .my-table {
      border-collapse: collapse;
      width: 100%;
    }
  
    .my-table td, .my-table th {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
  
    .my-table th {
      background-color: #f2f2f2;
    }
  </style>
  